<div
  class="accessory-box"
  [ngClass]="{ 'accessory-on': service.values.On || service.values.Active }"
  (shortClick)="onClick()"
  tabindex="0"
>
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.washing_machine' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- outer casing -->
        <rect x="3" y="1" width="25" height="30" rx="2" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
        <!-- top drawer -->
        <rect x="6" y="4" width="5" rx="0.5" height="4" stroke="#7f7f7f" fill="none" stroke-width="0.5" />
        <rect x="7" y="6" width="3" rx="0.25" height="1" stroke="#7f7f7f" fill="none" stroke-width="0.25" />
        <!-- control panel + buttons -->
        <rect x="14" y="4" width="11" height="4" rx="0.5" fill="none" stroke="#7f7f7f" stroke-width="0.5" />
        <rect
          x="19"
          y="5"
          width="5"
          height="2"
          rx="0.25"
          fill="#1976d2"
          fill-opacity="0.5"
          stroke="#7f7f7f"
          stroke-width="0.25"
        />
        <rect x="15" y="5" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
        <rect x="16" y="5" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
        <rect x="17" y="5" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
        <rect x="15" y="6" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
        <rect x="16" y="6" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
        <rect x="17" y="6" width="1" height="1" rx="0.25" fill="none" stroke="#7f7f7f" stroke-width="0.25" />
        <!-- drum handle -->
        <rect class="handle" x="19" y="15.5" rx="1" width="3" height="3" fill="#7f7f7f" />
        <!-- drum -->
        <circle cx="15.5" cy="17" r="6.5" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    <div
      class="accessory-label grey-text"
      [innerText]="((service.values.On || service.values.Active) ? 'accessories.control.on' : 'accessories.control.off') | translate"
    ></div>
  </div>
</div>
